<template>
  <div class="card-page">
    <tool-bar nav="" :title="action_name + '数据模型'">
      <el-button size="small" @click="$router.push('/dev/data-model/add')" v-if="$props.action=='edit'">新建</el-button>
      <el-button size="small" @click="save_click" type="primary">保存</el-button>
    </tool-bar>

    <div class="card bc5" style="margin: 4px 8px;border-radius: 8px;">
      <kv label="产品线">
        <product-line @change="(v,m)=>info.productLine.name=m.name" v-model="info.productLine.code"
                      chk="*"></product-line>
      </kv>
      <kv label="应用">
        <el-input v-model="info.app" chk="*"></el-input>
      </kv>
      <kv label="name">
        <el-input v-model="info.name" chk="*"/>
      </kv>

      <kv label="特性">
        <selector clearable v-model="info.tableView"
                  :data="{Table:'表',View:'视图'}"></selector>
      </kv>


      <kv label="remark">
        <el-input v-model="info.remark"/>
      </kv>
    </div>
    <div class="card bc5" style="margin: 4px 8px;border-radius: 8px;display: flex;justify-content: space-between;align-items: center;">
      <kv label="选择父模型">
        <ref-data-model v-model="info.parent"></ref-data-model>
      </kv>
      <kv label="父模型路径" v-if="info.parents && info.parents.length">
        <div class="link" v-for="item in info.parents" :key="item.id" style="margin-left:4px;"
             @click="edit_click(item.id)">
          {{ item.name }}
        </div>
      </kv>
      <div v-if="info.items && info.items.length" style=" display:flex; flex-direction: row;align-items: center;min-width:100px;margin:8px;">
        <label>子对象:</label>
        <el-select
            v-model="$data.subModel"
            filterable
            :placeholder="'共 ' + info.items.length + ' 个'"
            style="width: 120px;margin: auto 4px;"
        >
          <el-option
              v-for="item in info.items"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
        <el-button :disabled="!$data.subModel" @click="edit_click($data.subModel)">转到</el-button>
      </div>

      <div>
        <kv label="模型树路径">
          <el-tag v-for="item in info.treeTypes" :key="item.id" @click="jump_type(item.id)">{{item.name}}</el-tag>
        </kv>
      </div>
    </div>
    <api-json v-model="info.define" fix-object></api-json>
  </div>
</template>

<script setup>
/**
 * Created by CodeGenerator  at 2023-11-05 12:25:36
 */
import productLine from "@/component/product-line.vue";
import apiJson from "@/component/api-json-parameter.vue";
import refDataModel from "@/view/dev/data-model/ref-data-model.vue";





//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({
  subModel:null,
  info: {
    model: {},
    productLine: {},
  }, //子对象需要声明。

  ApiParameterTypeEnum: jv.enum.ApiParameterTypeEnum.getData(),
  ApiParameterStringTypeEnum: jv.enum.ApiParameterStringTypeEnum.getData(),
  ApiJsonLocationEnum: jv.enum.ApiJsonLocationEnum.getData(),
});
const info = $computed(() => $data.info);

const $props = defineProps({
  action: {type: String},
  id: {type: String}
});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);

const action = $computed(function () {
  return $props.id ? "edit" : "add";
});
const action_name = $computed(function () {
  return {add: "添加", edit: "修改"}[$props.action]
});


const edit_click = function (rowId) {
  //记录上次点击行
  jv.$router.push("/dev/data-model/edit/" + rowId)
};

const loadData = async function () {
  if (!$props.id) return;
  $data.subModel = "";
  let res = await jv.$http.post("/dev/data-model/detail/" + $props.id)
  $data.info = res.data.data;
};
const save_click = async function () {
//校验
  if (jv.chk_main($data) == false) {
    return;
  }
  let res = await jv.$http.post("/dev/data-model/save", $data.info)
//[axios拦截器中已处理了异常]。
  jv.info(action_name + " 成功");
  let id = res.data.data || $data.info.id;
  if (!id) {
    return jv.error("找不到 id");
  }
  jv.$router.push("/dev/data-model/edit/" + id);
};


const jump_type = (typeId)=>{
  jv.$router.push("/dev/model-tree-type/list?typeId=" + typeId);
}

watch(() => $props.id, v => {
  nextTick(() => {
    loadData();
  })
}, {immediate: true})

</script>

<style scoped lang="scss">
::v-deep(.join) .v {
  min-width: unset;
}
</style>
